<template>
  <div>
    <div id="container1">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item
          style="
            width: 98%;
            margin-top: 10px;
            margin-left: 30px;
            margin-bottom: 0px;
            text-align: left;
          "
        >
          <div style="float: left; margin-right: 5px">
            <el-input
              placeholder="请输入手机号码查询"
              v-model="telphoneCondition"
            ></el-input>
          </div>
          <el-button type="primary" @click="selectByTel">查询</el-button>
          <el-button type="warning" @click="reloadCustomerList">返回</el-button>
          <span>( 返回：重新加载客户列表信息 )</span>
        </el-form-item>
        <!-- <el-form-item> </el-form-item> -->
      </el-form>
      <el-divider></el-divider>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item
          label="用户类型:"
          style="
            width: 98%;
            margin-top: 0px;
            margin-left: 30px;
            margin-bottom: 0px;
            text-align: left;
          "
        >
          <el-radio v-model="multiConditon.radio" label="1">新用户</el-radio>
          <el-radio v-model="multiConditon.radio" label="2">老用户</el-radio>
        </el-form-item>
        <el-form-item
          style="margin-top: 0px; margin-left: 30px; text-align: left"
        >
          <el-date-picker
            style="width: 98%"
            v-model="multiConditon.beginTime"
            type="date"
            placeholder="选择注册日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            style="width: 100%"
            v-model="multiConditon.endTime"
            type="date"
            placeholder="选择截至日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            type="primary"
            @click="checkByCondition"
            >查询</el-button
          >
          <el-button type="warning" @click="reloadCustomerList">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="container2">
      <div style="width: 98%; margin: 5px auto; text-align: left">
        <el-button type="primary" @click="exportCustomerInfo" size="small"
          >导出报表</el-button
        >
      </div>
      <div style="width: 98%; margin: 10px auto; text-align: left">
        <div style="float: left; margin-right: 10px">
          <i class="el-icon-s-custom"></i>
        </div>
        <div>
          <h3>总用户数：{{ this.pageInfo.total }}</h3>
        </div>
      </div>
      <el-table
        ref="multipleTable"
        :data="pageInfo.list"
        tooltip-effect="dark"
        style="width: 100%"
        stripe="true"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center"> </el-table-column>
        <el-table-column label="手机号" prop="phone" align="center">
        </el-table-column>
        <el-table-column prop="cname" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="sex" label="性别" align="center">
        </el-table-column>
        <el-table-column prop="totalmoney" label="用户类型" align="center">
          <template slot-scope="scope">
            {{ scope.row.totalmoney | filterTotalmoney }}
          </template>
        </el-table-column>
        <el-table-column label="注册时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.regtime }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="address" label="订单总数"  align="center">
        </el-table-column> -->
        <el-table-column
          prop="totalmoney"
          label="累计消费（元）"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="customerDetail(scope.row)"
              >详情</el-button
            >
            <!-- <el-button
              type="danger"
              size="mini"
              @click="deletecustomer(scope.row)"
              >禁用</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNum"
        :page-sizes="[5, 10, 20]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      >
      </el-pagination>
    </div>
    {{ multipleSelection }}
  </div>
</template>
<style scoped>
#container1 {
  width: 95%;
  height: 200px;
  margin: auto;
  border: #cfcccc solid 1px;
  background-color: white;
  text-align: center;
}
#container2 {
  width: 95%;
  height: 580px;
  margin: auto;
  margin-top: 30px;
  border: #cfcccc solid 1px;
  background-color: white;
  text-align: center;
}
</style>
<script>
import {
  getCustomerList,
  getCustomerByTel,
  getCustomersByCondition,
  exportCustomer,
} from "@/api/customer.js";
export default {
  data() {
    return {
      //   customerList: [],
      multipleSelection: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 5,
      },
      telphoneCondition: "", //按照账号查询
      multiConditon: {
        //多条件查询
        radio: 1,
        beginTime: "",
        endTime: "",
      },
    };
  },
  filters: {
    filterTotalmoney(val) {
      return val > 0 ? "老用户" : "新用户";
    },
    //    filters: {
    //   formatDate: function (data) {
    //     function add0(num) {
    //       return num < 10 ? "0" + num : num;
    //     } // 个位数的值在前面补0
    //     const date = new Date(data);
    //     const Y = date.getFullYear();
    //     const M = date.getMonth() + 1;
    //     const D = date.getDate();
    //     const dateString = Y + "-" + add0(M) + "-" + add0(D);

    //     return dateString;
    //   },
    // },
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.pageInfo.pageNum = 1;
      this.loadCustomerList();
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val;
      this.loadCustomerList();
    },
    loadCustomerList() {
      getCustomerList(this.pageInfo).then((res) => {
        if (res.data.code == 200) {
          this.pageInfo = res.data.data;
        }
      });
    },
    selectByTel() {
      var data = {
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize,
        telphoneCondition: this.telphoneCondition,
      };
      getCustomerByTel(data).then((res) => {
        if (res.data.code == 200) {
          this.pageInfo = res.data.data;
          this.telphoneCondition = "";
        }
      });
    },
    reloadCustomerList() {
      //去除条件查询，重新加载
      this.loadCustomerList();
    },
    checkByCondition() {
      //多条件查询
      // radio: 1,
      // beginTime: "",
      // endTime: "",
      var data = {
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize,
        radio: parseInt(this.multiConditon.radio),
        beginTime: this.multiConditon.beginTime,
        endTime: this.multiConditon.endTime,
      };
      getCustomersByCondition(data).then((res) => {
        if (res.data.code == 200) {
          this.pageInfo = res.data.data;
          this.multiConditon = {};
        }
      });
    },
    customerDetail(row) {
      this.$router.push({
        path: "/Home/CustomerDetail",
        query: { cid: row.cid },
      });
    },

    /**
     * 数据导出
     */
    exportCustomerInfo() {
      exportCustomer().then((res) => {
        // 这里 data 是返回来的二进制数据
        var blob = new Blob([res.data], {
          type: "application/vnd.ms-excel;charset=UTF-8",
        });
        // 创建一个blob的对象链接
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = url;
        // 把获得的blob的对象链接赋值给新创建的这个 a 链接
        link.setAttribute("download", "客户信息.xlsx"); // 设置下载文件名
        document.body.appendChild(link);
        // 使用js点击这个链接
        link.click();
        document.body.removeChild(link); // 下载完成移除元素
        window.URL.revokeObjectURL(url); // 释放blob对象
      });
    },
  },
  mounted() {
    this.loadCustomerList();
  },
};
</script>